<template>
  <div class="super-admin-layout">
    <!-- 顶部导航栏 -->
    <header class="super-admin-header">
      <div class="header-left">
        <div class="logo">
          <i class="fas fa-crown"></i>
          <h1>智慧考试系统 - 超级管理员</h1>
        </div>
        
        <!-- 主导航 -->
        <nav class="main-nav hidden-mobile">
          <router-link to="/super-admin/dashboard" class="nav-item">
            <i class="fas fa-tachometer-alt"></i>
            仪表盘
          </router-link>
          <router-link to="/super-admin/users" class="nav-item">
            <i class="fas fa-users-cog"></i>
            用户管理
          </router-link>
          <router-link to="/super-admin/system" class="nav-item">
            <i class="fas fa-cogs"></i>
            系统管理
          </router-link>
          <div class="nav-divider"></div>
          <a href="/teacher/dashboard" class="nav-item external-link" target="_blank">
            <i class="fas fa-chalkboard-teacher"></i>
            教师界面
            <i class="fas fa-external-link-alt"></i>
          </a>
          <a href="/student/dashboard" class="nav-item external-link" target="_blank">
            <i class="fas fa-user-graduate"></i>
            学生界面
            <i class="fas fa-external-link-alt"></i>
          </a>
        </nav>
      </div>
      
      <div class="header-right">
        <!-- 系统状态 -->
        <div class="system-status hidden-mobile">
          <div class="status-item">
            <span class="status-dot online"></span>
            <span>系统正常</span>
          </div>
        </div>
        
        <!-- 通知 -->
        <el-badge :value="notificationCount" class="notification-badge">
          <el-button circle :icon="Bell" @click="showNotifications" />
        </el-badge>
        
        <!-- 用户菜单 -->
        <el-dropdown @command="handleUserCommand">
          <div class="user-info">
            <el-avatar :src="userStore.userInfo?.avatar" :size="32">
              {{ userStore.userInfo?.name?.charAt(0) }}
            </el-avatar>
            <span class="username hidden-mobile">{{ userStore.userInfo?.name }}</span>
            <span class="role-badge super-admin">超级管理员</span>
            <i class="fas fa-chevron-down"></i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <i class="fas fa-user"></i>
                个人资料
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <i class="fas fa-cog"></i>
                系统设置
              </el-dropdown-item>
              <el-dropdown-item command="logs">
                <i class="fas fa-file-alt"></i>
                操作日志
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <i class="fas fa-sign-out-alt"></i>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        
        <!-- 移动端菜单按钮 -->
        <el-button 
          class="mobile-menu-btn hidden-desktop"
          :icon="Menu"
          @click="toggleMobileMenu"
        />
      </div>
    </header>
    
    <!-- 移动端导航菜单 -->
    <div v-show="showMobileMenu" class="mobile-nav hidden-desktop">
      <router-link to="/admin/dashboard" class="mobile-nav-item" @click="closeMobileMenu">
        <i class="fas fa-tachometer-alt"></i>
        仪表盘
      </router-link>
      <router-link to="/admin/users" class="mobile-nav-item" @click="closeMobileMenu">
        <i class="fas fa-users-cog"></i>
        用户管理
      </router-link>
      <router-link to="/admin/system" class="mobile-nav-item" @click="closeMobileMenu">
        <i class="fas fa-cogs"></i>
        系统管理
      </router-link>
      <div class="mobile-nav-divider"></div>
      <a href="/teacher/dashboard" class="mobile-nav-item" target="_blank" @click="closeMobileMenu">
        <i class="fas fa-chalkboard-teacher"></i>
        教师界面
        <i class="fas fa-external-link-alt"></i>
      </a>
      <a href="/student/dashboard" class="mobile-nav-item" target="_blank" @click="closeMobileMenu">
        <i class="fas fa-user-graduate"></i>
        学生界面
        <i class="fas fa-external-link-alt"></i>
      </a>
    </div>
    
    <!-- 主内容区 -->
    <main class="super-admin-main">
      <router-view />
    </main>
    
    <!-- 通知抽屉 -->
    <el-drawer
      v-model="notificationDrawer"
      title="系统通知"
      direction="rtl"
      size="400px"
    >
      <div class="notification-list">
        <div v-for="notification in notifications" :key="notification.id" class="notification-item" :class="notification.type">
          <div class="notification-icon">
            <i :class="notification.icon"></i>
          </div>
          <div class="notification-content">
            <h4>{{ notification.title }}</h4>
            <p>{{ notification.content }}</p>
            <span class="notification-time">{{ notification.time }}</span>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Bell, Menu } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const showMobileMenu = ref(false)
const notificationDrawer = ref(false)

const notificationCount = computed(() => {
  return notifications.value.filter(n => !n.read).length
})

const notifications = ref([
  {
    id: 1,
    title: '系统安全警告',
    content: '检测到异常登录尝试，请检查系统安全',
    time: '5分钟前',
    icon: 'fas fa-shield-alt',
    type: 'warning',
    read: false
  },
  {
    id: 2,
    title: '数据库备份完成',
    content: '今日凌晨2:00数据库自动备份已完成',
    time: '6小时前',
    icon: 'fas fa-database',
    type: 'success',
    read: false
  },
  {
    id: 3,
    title: '新用户注册',
    content: '教师张老师已完成注册，等待审核',
    time: '1天前',
    icon: 'fas fa-user-plus',
    type: 'info',
    read: true
  },
  {
    id: 4,
    title: '系统更新',
    content: '系统版本已更新至v2.1.0',
    time: '3天前',
    icon: 'fas fa-sync-alt',
    type: 'info',
    read: true
  }
])

const showNotifications = () => {
  notificationDrawer.value = true
}

const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

const closeMobileMenu = () => {
  showMobileMenu.value = false
}

const handleUserCommand = async (command) => {
  switch (command) {
    case 'profile':
      // 跳转到个人资料页面
      break
    case 'settings':
      router.push('/super-admin/system')
      break
    case 'logs':
      router.push('/super-admin/logs')
      break
    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await userStore.logoutAction()
        ElMessage.success('退出登录成功')
        router.push('/login')
      } catch (error) {
        // 用户取消
      }
      break
  }
}
</script>

<style lang="scss" scoped>
.super-admin-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.super-admin-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  
  i {
    font-size: 28px;
    color: #ffd700;
  }
  
  h1 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    
    @media (max-width: 768px) {
      display: none;
    }
  }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    transition: all 0.3s ease;
    
    i {
      font-size: 16px;
    }
    
    &:hover {
      color: white;
      background: rgba(255, 255, 255, 0.1);
    }
    
    &.router-link-active {
      color: white;
      background: rgba(255, 255, 255, 0.2);
    }
    
    &.external-link {
      i:last-child {
        font-size: 12px;
        opacity: 0.7;
      }
    }
  }
  
  .nav-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 8px;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.system-status {
  .status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      
      &.online {
        background: #4caf50;
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
      }
    }
  }
}

.notification-badge {
  :deep(.el-badge__content) {
    border: 2px solid #667eea;
  }
  
  :deep(.el-button) {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .username {
    font-weight: 500;
    color: white;
  }
  
  .role-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    
    &.super-admin {
      background: #ffd700;
      color: #333;
    }
  }
  
  i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
}

.mobile-menu-btn {
  :deep(.el-button) {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
  }
}

.mobile-nav {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px;
  
  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    
    i {
      font-size: 16px;
      width: 20px;
      
      &:last-child {
        font-size: 12px;
        margin-left: auto;
      }
    }
    
    &:hover {
      color: white;
      background: rgba(255, 255, 255, 0.1);
    }
    
    &.router-link-active {
      color: white;
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  .mobile-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 12px 0;
  }
}

.super-admin-main {
  flex: 1;
  padding: 24px;
  background: var(--neutral-100);
  overflow-y: auto;
}

.notification-list {
  .notification-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--neutral-200);
    border-left: 4px solid transparent;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.warning {
      border-left-color: #ff9800;
      
      .notification-icon {
        background: rgba(255, 152, 0, 0.1);
        
        i {
          color: #ff9800;
        }
      }
    }
    
    &.success {
      border-left-color: #4caf50;
      
      .notification-icon {
        background: rgba(76, 175, 80, 0.1);
        
        i {
          color: #4caf50;
        }
      }
    }
    
    &.info {
      border-left-color: #2196f3;
      
      .notification-icon {
        background: rgba(33, 150, 243, 0.1);
        
        i {
          color: #2196f3;
        }
      }
    }
    
    .notification-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .notification-content {
      flex: 1;
      
      h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
        color: var(--neutral-700);
      }
      
      p {
        font-size: 13px;
        color: var(--neutral-500);
        margin-bottom: 8px;
        line-height: 1.4;
      }
      
      .notification-time {
        font-size: 12px;
        color: var(--neutral-400);
      }
    }
  }
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
  
  .super-admin-main {
    padding: 16px;
  }
}

@media (min-width: 769px) {
  .hidden-desktop {
    display: none !important;
  }
}
</style>